<template>
  <Tabs class="container" :value="tab.value">
    <Tab-pane label="用户列表" name="list">
      <div class="tool-wrap">
        <i-select v-model="searchLabelValue" style="width:100px">
          <i-option v-for="option in searchOption" :value="option.value" :key="option.value">{{option.label}}</i-option>
        </i-select>
        <i-input v-model="searchValue" style="width: 200px"/>
        <i-button type="ghost" icon="search" @click="search()">搜索</i-button>
        <Button-group class="rf">
          <i-button type="ghost" icon="refresh" class="tool-btn" @click="refresh">刷新</i-button>
          <i-button type="ghost" icon="plus" class="tool-btn" @click="showUserModal()">增加用户</i-button>
          <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteUsers()">批量删除用户</i-button>
        </Button-group>
      </div>
      <i-table ref="userTable" class="table-wrap" border :columns="columns" :data="userList" @on-selection-change="selectionChange">

      </i-table>
      <Page class="page-wrap" :total="pageConfig.total" :current="pageConfig.page" :pageSize="pageConfig.pageSize"
            @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="[10,20,30,50]" show-sizer show-elevator show-total placement="top"></Page>

      <Modal v-model="userModal.show"
             :title="userModal.title"
             :loading = "userModal.loading"
             @on-ok = "saveUser"
             ok-text="保存"
             cancel-text="关闭">
        <i-form :ref="userModal.formName" :model="userModal.formData" :rules="userModal.rules" :label-width="80">
          <Form-item label="用户名" prop="login_name">
            <i-input v-model="userModal.formData.login_name" placeholder="输入用户名"/>
          </Form-item>
          <Form-item label="姓名" prop="name">
            <i-input v-model="userModal.formData.name" placeholder="请输入姓名"/>
          </Form-item>
          <Form-item label="身份证号" prop="id_card">
            <i-input v-model="userModal.formData.id_card" placeholder="请输入身份证号码"/>
          </Form-item>
          <Form-item label="电话" prop="telephone">
            <i-input v-model="userModal.formData.telephone" placeholder="请输入手机号码"/>
          </Form-item>
          <Form-item label="QQ" prop="qq">
            <i-input v-model="userModal.formData.qq" placeholder="请输入QQ号码"/>
          </Form-item>
          <Form-item label="邮箱" prop="email">
            <i-input v-model="userModal.formData.email" placeholder="请输入邮箱地址"/>
          </Form-item>
        </i-form>
      </Modal>
    </Tab-pane>
  </Tabs>
</template>
<script>
  import userApi from '../../../api/admin/user'
  import {isConfirm} from '../../../assets/admin/js/common'

  let emptyUserForm = {
    id: 0,
    login_name: '',
    name: '',
    avatar: '',
    id_card: '',
    telephone: '',
    qq: '',
    email: ''
  }

  export default{
    components: {
    },
    data () {
      return {
        userModal: {
          show: false,
          loading: false,
          title: '创建用户',
          formName: 'userForm',
          formData: {...emptyUserForm},
          rules: {
            login_name: [
              {required: true, message: '请填写用户名', trigger: 'blur'}
            ],
            id_card: [
              {required: true, message: '请填写身份证号', trigger: 'blur'}
            ],
            name: [
              {type: 'string', required: true, message: '请填写姓名', trigger: 'blur'}
            ],
            telephone: [
              {type: 'string', require: true, message: '请填写电话', trigger: 'blur'}
            ],
            email: [
              {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
            ]
          }
        },
        tab: {
          value: 'list'
        },
        searchOption: [
          {
            value: 'login_name',
            label: '用户名'
          },
          {
            value: 'name',
            label: '姓名'
          },
          {
            value: 'id_card',
            label: '身份证'
          },
          {
            value: 'qq',
            label: 'QQ'
          },
          {
            value: 'telephone',
            label: '电话'
          },
          {
            value: 'email',
            label: '邮箱'
          }
        ],
        searchLabelValue: 'name',
        searchValue: '',
        columns: [
          {
            type: 'selection',
            width: 62,
            align: 'center'
          },
          {
            title: '登录名',
            key: 'login_name'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '身份证',
            key: 'id_card'
          },
          {
            title: '电话',
            key: 'telephone'
          },
          {
            title: 'QQ',
            key: 'qq'
          },
          {
            title: '邮箱',
            key: 'email'
          },
          {
            title: '操作',
            className: 'option-column',
            render: (h, params) => {
              let self = this
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: '编辑',
                    placement: 'top'
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'edit'
                    },
                    on: {
                      click: () => {
                        self.showUserModal(params.row)
                      }
                    }
                  })
                ]),
                h('Tooltip', {
                  props: {
                    content: '删除',
                    placement: 'top'
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'trash-a'
                    },
                    on: {
                      click: () => {
                        self.deleteUser(params.row)
                      }
                    }
                  })
                ]),
                h('Tooltip', {
                  props: {
                    content: '重置密码',
                    placement: 'top'
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'reply'
                    },
                    on: {
                      click: () => {
                        self.resetPassword(params.row)
                      }
                    }
                  })
                ])
              ])
            }
          }
        ],
        userList: [],
        pageConfig: {
          page: 0,
          pageSize: 10,
          total: 10
        },
        selection: []
      }
    },
    methods: {
      showUserModal (user) {
        this.userModal.formData = {...emptyUserForm}
        if (user) {
          this.userModal.title = '编辑用户'
          this.userModal.formData = user
        }
        this.userModal.show = true
      },
      selectionChange (selection) {
        this.selection = selection
      },
      pageChange (page) {
        this.pageConfig.page = page - 1
        this.getUserList()
      },
      pageSizeChange (pageSize) {
        this.pageConfig.page -= 1
        this.pageConfig.pageSize = pageSize
        this.getUserList()
      },
      refresh () {
        this.searchValue = ''
        this.pageConfig.page -= 1
        this.getUserList()
      },
      search (page) {
        this.pageConfig.page = page || 0
        this.getUserList()
      },
      getUserList () {
        let self = this
        let params = {}
        self.pageConfig.page += 1
        params.page = self.pageConfig.page
        params.pageSize = self.pageConfig.pageSize
        params.key = self.searchLabelValue
        params.value = self.searchValue
        userApi.getUserList(params, data => {
          self.pageConfig.total = data.count
          self.userList = data.data
        }, msg => {
          self.pageConfig.page -= 1
          self.$Message.warning(msg)
        })
      },
      saveUser () {
        let self = this
        self.$refs[self.userModal.formName].validate((valid) => {
          if (!valid) {
            return
          }
          userApi.saveUser(self.userModal.formData, () => {
            self.search(self.pageConfig.page - 1)
            self.userModal.show = false
            self.$Message.success('用户保存成功')
          }, (msg) => {
            self.userModal.loading = false
            self.$Message.warning(msg)
          })
        })
      },
      deleteUser (row) {
        let self = this
        isConfirm(`删除用户【${row.name}】？`, () => {
          userApi.deleteUser(row.id, () => {
            self.$Message.success(`删除用户【${row.name}】成功！`)
            self.refresh()
          })
        })
      },
      deleteUsers () {
        let self = this
        let userIds = []
        let names = []
        self.selection.forEach(user => {
          userIds.push(user.id)
          names.push(user.name)
        })
        isConfirm(`删除用户【${names.join(',')}】？`, () => {
          userApi.deleteUsers(userIds, () => {
            self.$Message.success(`删除用户【${names.join(',')}】成功！`)
            self.refresh()
          })
        })
      },
      resetPassword (row) {
        let self = this
        isConfirm(`重置用户【${row.name}】密码？`, () => {
          userApi.resetPassword(row.id, () => {
            self.$Message.success(`重置用户【${row.name}】密码成功！`)
          })
        })
      }
    },
    created () {
      this.getUserList()
    }
  }
</script>
<style lang="less">
  .tool-btn {
    margin-left: 10px;
  }
  .option-column{
    .ivu-btn{
      padding: 6px 4px;
    }
    .ivu-icon{
      font-size: 16px;
    }
  }
</style>
